﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Word Distribution report</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>

    <style type='text/css'>
        
    </style>
    <script type='text/javascript'>//<![CDATA[

                /**
             * Grid theme for Highcharts JS
             * @author Torstein Hønsi
             */

            Highcharts.theme = {
               colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
               chart: {
                  backgroundColor: {
                     linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                     stops: [
                        [0, 'rgb(255, 255, 255)'],
                        [1, 'rgb(240, 240, 255)']
                     ]
                  },
                  borderWidth: 2,
                  plotBackgroundColor: 'rgba(255, 255, 255, .9)',
                  plotShadow: true,
                  plotBorderWidth: 1
               },
               title: {
                  style: {
                     color: '#000',
                     font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
                  }
               },
               subtitle: {
                  style: {
                     color: '#666666',
                     font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
                  }
               },
               xAxis: {
                  gridLineWidth: 1,
                  lineColor: '#000',
                  tickColor: '#000',
                  labels: {
                     style: {
                        color: '#000',
                        font: '11px Trebuchet MS, Verdana, sans-serif'
                     }
                  },
                  title: {
                     style: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        fontFamily: 'Trebuchet MS, Verdana, sans-serif'

                     }
                  }
               },
               yAxis: {
                  minorTickInterval: 'auto',
                  lineColor: '#000',
                  lineWidth: 1,
                  tickWidth: 1,
                  tickColor: '#000',
                  labels: {
                     style: {
                        color: '#000',
                        font: '11px Trebuchet MS, Verdana, sans-serif'
                     }
                  },
                  title: {
                     style: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                     }
                  }
               },
               legend: {
                  itemStyle: {
                     font: '9pt Trebuchet MS, Verdana, sans-serif',
                     color: 'black'

                  },
                  itemHoverStyle: {
                     color: '#039'
                  },
                  itemHiddenStyle: {
                     color: 'gray'
                  }
               },
               labels: {
                  style: {
                     color: '#99b'
                  }
               },

               navigation: {
                  buttonOptions: {
                     theme: {
                        stroke: '#CCCCCC'
                     }
                  }
               }
            };

            // Apply the theme
            var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'area'
                },
                title: {
                    text: 'Word distribution'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    labels: {
                        formatter: function () {
                            return Math.round((this.value / 40) * 10000) / 100 + "%";
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: 'Occurrence %'
                    },
                    labels: {
                        formatter: function () {
                            return this.value;
                        }
                    }
                },
                tooltip: {
                    pointFormat: '{series.name} occured <b>{point.y}</b> times<br/>',
                    shared: true
                },
                plotOptions: {
                    area: {
                        pointStart: 0,
                        stacking: 'percent',
                        marker: {
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                %series%
            });


            $('#pieContainer').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Word occurrence'
                },
                tooltip: {
        	        pointFormat: '{series.name}: <b>{point.y}</b>',
            	    percentageDecimals: 1
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.point.y +' ';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Word occurence',
                    %pieData%
                }]
            });
   
        });
    

//]]>  

    </script>
</head>
<body>
    
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
    </div>
    <div id="pieContainer" style="min-width: 400px; height: 400px; margin: 0 auto">
    </div>
</body>
</html>
